<template>
  <v-card
      class="mx-auto"
      max-width="344"
      elevation="25"
  >

    <v-img src="../assets/profile.jpg"></v-img>
    <v-card-title>
      XWYZSN
    </v-card-title>

    <v-card-subtitle>
      zjuter
      <br/>
      <div style="font-size: small">
      <v-icon
          color="blue"
          small>
        mdi-email
      </v-icon>
      xwyzsn@gmail.com
      </div>
      <div style="font-size: small">
        <a href="https://github.com/xwyzsn" target="_blank" style="text-decoration:none;color: grey" >
        <v-icon
            color="black"
            small
        >
          mdi-github
        </v-icon>
          </a>
        <a href="https://github.com/xwyzsn" target="_blank" style="text-decoration:none;color: grey">xwyzsn</a>
      </div>
    </v-card-subtitle>
    <v-card-actions>
      <v-btn
          color="orange lighten-2"
          text
      >
        更多
      </v-btn>

      <v-spacer></v-spacer>

      <v-btn
          icon
          @click="show = !show"
      >
        <v-icon>{{ show ? 'mdi-chevron-up' : 'mdi-chevron-down' }}</v-icon>
      </v-btn>
    </v-card-actions>

    <v-expand-transition>
      <div v-show="show">
        <v-divider></v-divider>

        <v-card-text class="text-md-caption">
          一些关于前端,机器学习,深度学习的个人博客....

        </v-card-text>
      </div>
    </v-expand-transition>
  </v-card>
</template>
<script>
export default {
  data: () => ({
    show: false,
  }),
}

</script>